<template>
	<view class="page address px12 py8">
		<view class="r6 bgff px12">
			<view class="flex flexC pt14 borb pb10">
				<text class="w-5">收货人</text>
				<input class="flex1" v-model="username" type="text" placeholder="请填写收货人的姓名" placeholder-class="cbd"/>
			</view>
			<view class="flex flexC pt14 borb pb10">
				<text class="w-5">手机号码</text>
				<input type="text" v-model="mobile" class="flex1" placeholder="请填写手机号码" placeholder-class="cbd">
			</view>
			<view class="flex flexC pt4 borb pb2" @click="openLocation">
				<text class="w-5">所在地区</text>
				<input disabled="disable" v-model="cityStr" class="flex1" type="text" placeholder="请选择所在地区" placeholder-class="cbd"/>
				<image  class="location" src="/static/img/icon/location.png" mode="widthFix"></image>
			</view>
			<view class="flex flexC pt14 pb10">
				<text class="w-5">详细地址</text>
				<input v-model="address" type="text" class="flex1" placeholder="如街道、小区、门牌号等" placeholder-class="cbd">
			</view>
		</view>
		
		<button @click="edit" class="bgff0 w212 r40 mt25 fs16 py14">保存</button>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude:'',
				longitude:"",
				address:"",
				city:"",
				province:'',
				area:"",
				cityStr:"",
				username:"",
				mobile:"",
				id:""
			};
		},
		onLoad(option) {
			
			var item = JSON.parse(option.item)
			this.id = item.id;
			this.province = item.province;
			this.city = item.city;
			this.area = item.area;
			this.mobile = item.phone;
			this.username = item.name;
			this.latitude = item.lat;
			this.longitude = item.lng;
			this.address = item.detail;
			this.cityStr = this.province +" "+ this.city+" "+this.area
			
		},
		methods: {
			
			edit(){
				if(this.username == "" || this.mobile == ""){
				  uni.showToast({title:"手机号或姓名不能为空",icon:'none'});
				  return;
				}
				if(this.city == ""){
				  uni.showToast({title:"请选择城市",icon:'none'});
				  return;
				}
				if(this.detail == ""){
				  uni.showToast({title:"请输入详细地址",icon:'none'});
				  return;
				}
				let param = {
					id:this.id,
					username:this.username,
					mobile:this.mobile,
					city:this.city,
					area:this.area,
					province:this.province,
					lat:this.latitude,
					lng:this.longitude,
					detail:this.address,
					
				}
				this.$api.editAddress(param).then(res => {
					
					if(res.code == 1){
						uni.navigateBack({
							delta:1
						})
					}else{
						uni.showToast({title:res.msg,icon:'none'});
						
					}
					
				})
				
			},
			
			openLocation(){
				let that = this;
				uni.chooseLocation({
					 success: function (res) {
						 console.info(res)
						 that.latitude = res.latitude;
						 that.longitude = res.longitude;
						 
						 let regex = "(?<province>[^省]+省|.+自治区)(?<city>[^自治州]+自治州|[^市]+市|[^盟]+盟|[^地区]+地区|.+区划)(?<county>[^市]+市|[^县]+县|[^旗]+旗|.+区)?(?<town>[^区]+区|.+镇)?(?<village>.*)"
						 let newAddress = res.address.match(regex);
						 let group = newAddress.groups;
						 
						
						 that.province= group.province;
						 that.city= group.city;
						  if(group.county != null){
							 that.area= group.county;
						 }
						 if(group.town != null){
						 	that.area= group.county;
						 }
						 that.address = group.village;
						 that.cityStr = that.province +" "+ that.city+" "+that.area
					     console.log('位置名称：' + res.name);
					     console.log('详细地址：' + res.address);
					     console.log('纬度：' + res.latitude);
					     console.log('经度：' + res.longitude);  
					    }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.address {
	.location {width: 80upx;}
	.w212 {width: 424upx;position: fixed;bottom: 40upx; left: calc(50% - 212upx);}
	.txt {width: 100%;height: 180upx;}
	// button[disabled]{opacity: .4;background-color: #FF0000;color: #fff;}
	.fixed {position: fixed;bottom: 0;left: 0;width: 100%;}
	.bgd0 {background-color: #D0D0D0;}
	.btn {width: 236upx;height: 72upx;line-height: 72upx;}
}
</style>
